<template>
	<view>
		<view class="all-box">
			<view class="topinput">
				<input class="input " placeholder="填写活动稿件标题" type="text" value="" v-model="btinput" />
				<uni-icons @click="close" style="position: relative;top: -65rpx;left: 625rpx;z-index: 100;" type="close" color="#999"
				 size="21">
				</uni-icons>
			</view>
			<view class="gjjc">
				<view class="tp-pb20">
					<text class="tp-fz28 ">稿件介绍</text>
				</view>
				<view class="gjtxt">
					<textarea class="" v-model="content" placeholder="请填写介绍稿件内容" placeholder-style="font-size: 24rpx;color: #999999;"
					 maxlength="300" />
					<text style="position: absolute;right: 60rpx;top: 450rpx;color: #999999;">200字左右</text>
				</view>
			</view>
			<!-- 上传照片 S-->
			<view class="photo">
				<view class="" >
					<view class="tp-w690  tp-bgf tp-bbox tp-br12 tp-fz30 tp-fc333">
						
						<view class="level_align flex_wrap">
							<view class="" style="position: relative;" v-for="(item,index) in list" :key="index" >
								<image @click="previewImg(item,list)" class="zheng-img tp-br12" :src="item" :style="{marginRight:(index+1)%3 == 0 ?'0':'35rpx'}" mode="aspectFill"></image>
								<image @click.stop="delThisImg(index)" class="close-icon" src="../static/icon/close4.png" mode=""></image>
							</view>
							<image v-if="list.length < 9" @click="handleUploadIDImgPositive" class="zheng-img tp-br12" src="../static/icon/photo.png" mode=""></image>
							
						</view>
						<!-- <text class="tp-fc999 tp-fz24">最多上传3张图片</text> -->
					</view>
				</view>
				
			</view>
			<!-- 上传照片 E-->
			<!-- 富文本 S-->
			<view class="text-box">
				<jin-edit placeholder="请输入内容" :html="message" @editOk="editOk" uploadFileUrl="this.$api.uploadFile"></jin-edit>
			</view>
			<!-- 富文本 E-->
			<view class="buy_description tp-w690" @click="handleChooseBuyDescription">
				<view  v-if="!buyDescriptionStatus" class="icon">
					<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
				</view>
				<view  v-else class="icon">
					<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
				</view>
				<view>
					请您仔细阅读
					<text class="terms">《发布须知》</text>
					<!-- @click.stop="handleGoInsuranceDetail(it_n, 2)" -->
				</view>
			</view>
		</view>
		<!-- 发布作品内容 E-->
		
		<view class="bottom-box flex flex_around tp-bgf" style="position: fixed;bottom: 0;z-index: 10;">
			<view class="zxtg" @click="mygaojian">
				发布稿件
			</view>
		</view>
		<Notice ref="notice" :noticeInfo="noticeInfo" :isbtn="buyDescriptionStatus" @NoticeOk="buyDescriptionStatus = true" @close="textareaShow = true"></Notice>
	</view>
</template>

<script>
	import jinEdit from '../../components/jin-edit/jin-edit';
	import Notice from '@/components/common/notice.vue'
	export default {
		components:{
				jinEdit,
				Notice
		},
		data() {
			return {
				message:'',//回显的富文本
				id:'',
				content:'',//介绍
				btinput: '',//标题
				list: [], // 上传的图片
				uplist: [], // 要上传的图片
				contenttext:'',//富文本内容
				update: {
					imgExt: '', // 图片字段拼接字符串
				},
				indexN:'',
				xqid:'',//获取详情的id
				detail:'',//详情
				
				textareaShow: true, // 文本框显示隐藏
				buyDescriptionStatus: false, // 购买须知
				noticeList: [], // 须知列表
				noticeInfo: {}, // 须知信息
			};
		},
		onLoad(opt) {
			console.log(opt)
			if(opt.id){
				this.id = opt.id
			}
			if(opt.xqid){
				this.xqid = opt.xqid
					this.getdetail()
			}
		},
		// 下拉刷新
		/* onPullDownRefresh() {
		}, */
		watch:{
			contenttext:'changetype'},
		methods: {
			//富文本变化取消勾选
			changetype(){
				this.buyDescriptionStatus = false
			},
			// 点击须知
			handleChooseBuyDescription() {
				this.$http.get(this.$api.orderText, {
					type: 21,
				}).then(res => {
					if (res.code === 200) {
						this.textareaShow = false
						this.noticeInfo = res.data.list[0]
						this.$refs.notice.show()
					}
				})
			},
			//获取失败的数据
			getdetail() {
				this.$http.get(this.$api.activityDetailDesc + '?detailId=' + this.xqid).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						this.detail = res.data
						this.btinput = this.detail.articleName
						this.content = this.detail.intro
						// this.list.push(this.$baseUrl + this.detail.images)
						// this.list = this.$baseUrl + this.detail.images.split(',')
						this.id = this.detail.activityId
						this.message = this.detail.content
					}
				})
			},
				// 选择什么文件
						selectWhat() {
							const _this = this
							uni.showActionSheet({
								itemList: ['手机文件 '],
								success: function(res) {
									console.log(res)
									switch (res.tapIndex) {
										case 0:
										console.log(1111111)
											_this.selectFile()
											break;
										default:
									}
								},
								fail: function(res) {
									console.log(res.errMsg);
								}
							});
						},
							// 选择手机文件
									selectFile(){
										// this.upfile = true
										uni.navigateTo({
											url:'/pagesSecond/strategy/web-view-local'
										})
									},
						// 选择什么文件E
			close() {
				this.btinput = ''
			},
			// 上传图片
			handleUploadIDImgPositive() {
				const _this = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '],
					success: ({tempFilePaths}) => {
						if(tempFilePaths.length<=9){
						for(let i = 0 ; i < tempFilePaths.length ; i++){
							uni.uploadFile({
								url: _this.$baseUrl + _this.$api.uploadFile,
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									let uploadData = JSON.parse(uploadFileRes.data)
									if(_this.list.length<9){
										_this.list.push(this.$imgUrl + uploadData.url)
										_this.uplist.push(uploadData.url)
										_this.update.imgExt = _this.uplist.join(',')
										console.log(_this.list)
									}else{
										uni.showToast({
											title: '最多九张图片',
											icon: 'none'
										})
									}
									 
									// _this.$set(this.updata, key, uploadData.url)
								}
							})
						}
						
					}
					}
				});
			},
			// 删除这个图片
			delThisImg(index){
				this.list.splice(index,1)
				this.update.imgExt = this.list.join(',')
			},
			// 预览图片
			previewImg(url,list) {
				console.log(url,list);
				uni.previewImage({
					current: url,
					urls: list,
					success: function(){
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//获取富文本内容
			editOk(e){
				console.log(e.html)
				this.contenttext = e.html
			},
			//发布稿件
			 mygaojian(){
				 if(this.btinput==''){
					 uni.showToast({
					 	title: '标题不能为空',
					 	icon: 'none'
					 })
					 return
				 }
				 if(this.contenttext==''){
					 uni.showToast({
						title: '内容不能为空',
						icon: 'none'
					 })
					 return
				 }
				 if(this.content==''){
					 uni.showToast({
						title: '稿件介绍不能为空',
						icon: 'none'
					 })
					 return
				 }
				 if (!this.buyDescriptionStatus) {
				 	return uni.showToast({
				 		title: '请仔细阅读并确认《发布须知》',
				 		icon: 'none'
				 	})
				 }
				 let param = {
				 	activityId:this.id,//活动ID
				 	articleName:this.btinput,//标题
				 	content:this.contenttext,//内容
				 	images:this.update.imgExt,//	图片
				 	intro:this.content,//介绍
				 }
				this.$http.post(this.$api.activitypublishOnline,param).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '稿件已上传,请等待审核',
							icon: 'none'
						})
						if(this.xqid==''){
							uni.navigateBack({
								delta: 1
							})
						}else{
							uni.navigateBack({
								delta: 2
							})
						}
					}
				})
			}, 
		}
	}
</script>

<style lang="scss">
	.buy_description {
		position: relative;
		font-size: 28rpx;
		padding: 30rpx 0 147rpx 50rpx;
		box-sizing: border-box;
		line-height: 50rpx;
	
		.icon {
			display: inline-block;
			height: 30rpx;
			width: 30rpx;
			margin-right: 20rpx;
			position: absolute;
			top: 36rpx;
			left: 0;
		}
	
		.terms {
			color: $blue;
		}
	}
	/* 大box */
	.all-box{
		width: 100%;
		background: #FFFFFF;
	}
	.topinput {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		padding: 30rpx 30rpx 0 30rpx;

		.input {
			width: 92%;
			padding-left: 18rpx;
			padding-right: 80rpx;
			box-sizing: border-box;
			height: 80rpx;
			border: 2rpx solid #EBEBEB;
			border-radius: 8rpx;

		}
	}
	/* 稿件介绍 */
	.gjjc{
		width: 690rpx;
		padding:0 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		.gjtxt{
			 padding: 20rpx 20rpx 0 20rpx; 
			box-sizing: border-box;
			width: 690rpx;
			max-height: 340rpx;
			background: #F5F5F5;
			border-radius: 8rpx;

		}
	}
	/* 上传照片 */
	.zheng-img{
		width: 188rpx;
		height: 188rpx;
	}
	.close-icon{
		position: absolute;
		top: -14rpx;
		right: 14rpx;
		width: 28rpx;
		height: 28rpx;
	}
	/* 上传文件 */
	.scbox{
		margin: 30rpx;
		width: 188rpx;
		height: 188rpx;
		background: #F5F5F5;
		border-radius: 8rpx;
		line-height: 188rpx;
		font-size: 28rpx;
		font-weight: bold;
		font-family: PingFang SC;
		color: #999999;
		text-align: center;
	}
	/* 底部按钮 */
	.bottom-box{
		
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		.zxtg{
			width: 560rpx;
			height: 88rpx;
			background: #00B4FF;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>
